<template>
  <v-navigation-drawer expand-on-hover rail class=" min-h-100vh">
    <v-list>
      <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg" title="Sandra Adams"
        subtitle="sandra_a88@gmailcom"></v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list density="compact" nav>
      <template v-for="(firstMenu, index) in currentRoutes!.children">
        <template v-if="firstMenu.children">
          <v-list-group :key="index">
            <template v-slot:activator="{ props }">
              <v-list-item v-bind="props" title="Admin" :prepend-icon="(firstMenu.meta!.icon as string)"
                @click="routeChange(firstMenu.children[0])"></v-list-item>
            </template>

            <v-list-item v-for="(secondMenu, i) in firstMenu.children" :key="i"
              :title="(secondMenu.meta?.menuName as string)" :prepend-icon="(secondMenu.meta!.icon as string)"
              :value="(secondMenu.meta?.menuName as string)" @click="routeChange(secondMenu)"></v-list-item>
          </v-list-group>
        </template>
        <template v-else>
          <v-list-item :title="(firstMenu.meta?.menuName as string)" value="myfiles" :key="index"
            :prepend-icon="(firstMenu.meta!.icon as string)" @click="routeChange(firstMenu)"></v-list-item>
        </template>

      </template>

    </v-list>
  </v-navigation-drawer>
</template>
<script setup lang="ts">
import { RouteRecord, useRouter } from 'vue-router';
const comboRoute = (routes: Array<any>): any => {
  if (!routes || routes.length === 0) return undefined;
  return routes.map((x: any) => {
    const children = comboRoute(x.children);
    return { ...x.meta, path: x.path, children, selected: false };
  });
};
const router = useRouter()
const currentRoutes = router.getRoutes().find(i => i.path === '/')
// 当前完整嵌套路由
console.log(router.getRoutes());
// 菜单点击路由跳转
const routeChange = (route: any) => {
  router.push({ name: route.name })
  console.log(route);
}

</script>
<style></style>
